<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>面板</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.lite.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'lite';
    </script>


</head>
<body>

	<h2>面板</h2>
	<h3>说明:</h3>
	<span>面板是其他组件或元素的容器</span>
	<h3>一、面板</h3>
	<div>
		<div class="use-prettyprint">
			<div style="padding: 10px;">
				<div class="hisui-panel" title="病人信息" style="width:500px;height: 300px;padding:8px 15px 15px 15px;" 
				data-options="closable:false,collapsible:true,minimizable:false,maximizable:true">
					<div class="my-demo-content">
						内容
					</div>
				</div>
			</div>
		</div>
		
	</div>
	<h3>二、多面板布局</h3>
	<div>
		<div class="use-prettyprint">
			<div style="padding: 10px;">
				<div>
					<div class="hisui-panel" title="病人信息" style="height:200px;padding:20px;" 
					data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
						面板
					</div>
				</div>
				<div style="margin: 10px 0;">
					<div class="hisui-panel" title="诊断列表" style="height:200px;padding:20px;" 
					data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
						医嘱列表信息
					</div>
				</div>
				<div>
					<div class="hisui-panel" title="医嘱列表" style="height:200px;padding:20px;" 
					data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
						医嘱列表信息
					</div>
				</div>
			</div>
			
		</div>
	</div>
	
	<table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>bodyCls</td>
			<td>面板内容样式类</td>
			<td>null</td>
			<td>可选值：<code>'panel-body-gray'</code></td>
		</tr>
		<tr>
			<td>headerCls</td>
			<td>面板头样式类</td>
			<td>null</td>
			<td>可选值<code>'showicon'</code>,因极简版默认不显示图标,可用showicon用于强制显示图标</td>
		</tr>
		<tr>
            <td>notTrans</td>
            <td>不自动翻译与否</td>
            <td>false</td>
            <td>默认自动翻译。true表示不翻译 <code>20230801</code></td>
        </tr>
	</table>
	<prettyprint/>
</body>
</html>